<template>
  <view>
    <!--pages/showMap/showMap.wxml-->
    <!--绑定输入事件-->
    <view v-if="addListShow">
      <view class="top">
        <!-- <view class="back iconfont icon-fanhui" bindtap="back1"></view> -->
        <view :class="['search-box', addListShow ? 'search-box1' : '']">
          <view class="region" @click="chooseCity">{{ currentRegion.district }}</view>
          <view class="shu"></view>
          <!--todo-->
          <input bindinput="getsuggest" placeholder="请输入地址" />
        </view>
      </view>
      <!--关键词输入提示列表渲染-->
      <view class="add-list-box">
        <scroll-view class="add-list" scroll-y>
          <view class="add-item" v-for="(item, index) in suggestion" :key="index">
            <!--绑定回填事件 todo-->
            <view @click="backfill(index, item.title)">
              <!--根据需求渲染相应数据-->
              <!--渲染地址title-->
              <view class="title">{{ item.title }}</view>
              <!--渲染详细地址-->
              <view class="add">{{ item.addr }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>


    <view v-if="!addListShow && !chooseCity">
      <!--地图容器todo-->
      <map id="myMap" style="width:100%;height:300px;" :longitude="longitude" :latitude="latitude" scale="17" bindregionchange="mapChange">
      </map>
      <view class="top">
        <view class="search-box">
          <view class="region" @click="chooseCity">{{ currentRegion.district }}</view>
          <view class="shu"></view>
          <!-- 请输入地址</input> todo-->
          <text @click="showAddList">请输入地址</text>
          <!-- <input class="placeholder" bindtap="showAddList" placeholder="请输入地址" /> -->
        </view>
      </view>
      <view class="map-prompt">您可拖动地图, 标记准确位置</view>
      <text class="current-site-icon iconfont icon-targetAddress" style="color: red;font-size:60rpx;"></text>
      <view class="reload" @click="reload">
        <view class="center1">
          <view class="center2"></view>
        </view>
      </view>

      <scroll-view class="near-list" scroll-y>
        <!--绑定回填事件-->
        <view class="near-item" v-for="(item, index) in nearList" :key="index">
          <view class="current-site iconfont icon-targetAddress" v-if="index == selectedId"></view>
          <!--根据需求渲染相应数据todo-->
          <view @click="chooseCenter(index, item.title)">
            <!--渲染地址title-->
            <view :class="['title', index == selectedId ? 'title1' : '']">{{ item.title }}</view>
            <!--渲染详细地址-->
            <view :class="['add', index == selectedId ? 'add1' : '']">{{ item.addr }}</view>
          </view>
        </view>
      </scroll-view>
      <view class="bottom-box">
        <!-- todo -->
        <button @click="selectedOk">确认地址</button>
      </view>
    </view>

    <view class="region-box" v-if="chooseCity">
      <view class="region-top">
        <!-- <view class="region-back iconfont icon-fanhui" bindtap="back2"></view> -->
        <view class="title">选择城市</view>
      </view>
      <view class="region-tabs">
        <text class="tab" @click="showProvince">{{ currentProvince }}</text>
        <text class="tab" @click="showCity" v-if="!regionShow.province">{{ currentCity }}</text>
        <text class="tab" @click="showDistrict" v-if="regionShow.district">{{ currentDistrict }}</text>
      </view>
      <scroll-view scroll-y style="height:1050rpx;">
        <view class="region-list" v-if="regionShow.province">
          <view class="region-item" v-for="(item, index) in regionData.province" :key="index">
            <view @click="selectProvince(item.id, item.fullname)">
              <text>{{ item.fullname }}</text>
            </view>
          </view>
        </view>
        <view class="region-list" v-if="regionShow.city">
          <view class="region-item" v-for="(item, index) in regionData.city" :key="index">
            <view @click="selectCity(item.id, item.fullname)">
              <text>{{ item.fullname }}</text>
            </view>
          </view>
        </view>
        <view class="region-list" v-if="regionShow.district">
          <view class="region-item" v-for="(item, index) in regionData.district" :key="index">
            <!-- <view data-id="{{item.id}}" data-name="{{item.fullname}}" 
            data-latitude="{{item.location.lat}}" data-longitude="{{item.location.lng}}"  -->
            <view @tap="selectDistrict(item.id, item.fullname, item.location.lat, item.location.lng)">
              <text>{{ item.fullname }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
var qqmapsdk;
import { TMap } from '../utils/qqmap-wx-jssdk';
export default {
  components: {},
  data() {
    return {
      addListShow: false,
      chooseCity: false,
      regionShow: {
        province: false,
        city: false,
        district: true
      },
      regionData: {},
      currentRegion: {
        province: '选择城市',
        city: '选择城市',
        district: '选择城市',
        areaCode: '',
        addr: ''
      },
      currentProvince: '选择城市',
      currentCity: '选择城市',
      currentDistrict: '选择城市',
      latitude: '',
      longitude: '',
      centerData: {},
      nearList: [],
      suggestion: [],
      selectedId: 0,
      defaultKeyword: '房产小区',
      keyword: ''
    }
  },
  computed: {},
  methods: {
    qqLocation(latitude = 39.93, longitude = 116.42) {
      console.log('默认地址', latitude, longitude)
      const that = this
      //你地址解析
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: latitude,
          longitude: longitude
        },
        success: function (res) {
          console.log('ressssssss', res)
          that.latitude = latitude
          that.longitude = longitude
          that.currentRegion = Object.assign(res.result.address_component, {
            areaCode: res.result.ad_info.adcode
          })
          that.keyword = that.defaultKeyword
          // that.setData({
          //   latitude: latitude,
          //   longitude: longitude,
          //   currentRegion: Object.assign(res.result.address_component, {
          //     areaCode: res.result.ad_info.adcode
          //   }),
          //   keyword: that.defaultKeyword
          // })
          // 调用接口
          that.nearby_search();
        },
      });
    },
    //监听拖动地图，拖动结束根据中心点更新页面
    mapChange: function (e) {
      let that = this;
      if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
        that.mapCtx.getCenterLocation({
          success: function (res) {
            //console.log(res)
            that.nearList = []
            that.latitude = res.latitude
            that.longitude = res.longitude
            // that.setData({
            //   nearList: [],
            //   latitude: res.latitude,
            //   longitude: res.longitude,
            // })
            that.nearby_search();
          }
        })
      }

    },
    //重新定位
    reload: function () {
      this.onLoad();
    },
    //整理目前选择省市区的省市区列表
    getRegionData: function () {
      let that = this;
      //调用获取城市列表接口
      qqmapsdk.getCityList({
        success: function (res) { //成功后的回调
          console.log('调用获取城市列表接口', res)
          let provinceArr = res.result[0];
          that.regionData.province = provinceArr
          // that.setData({
          //   ['regionData.province']: provinceArr
          // })
          let cityArr = [];
          let districtArr = [];
          for (var i = 0; i < provinceArr.length; i++) {
            var name = provinceArr[i].fullname;
            if (that.currentRegion.province == name) {
              if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {
                cityArr.push(provinceArr[i])
                that.regionData.city = cityArr
                // that.setData({
                //   ['regionData.city']: cityArr
                // })
              } else {
                qqmapsdk.getDistrictByCityId({
                  // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
                  id: provinceArr[i].id,
                  success: function (res) { //成功后的回调
                    cityArr = res.result[0];
                    that.regionData.city = cityArr
                    // that.setData({
                    //   ['regionData.city']: cityArr
                    // })
                  },
                });
              }
            }
          }
          for (var i = 0; i < res.result[1].length; i++) {
            var name = res.result[1][i].fullname;
            if (that.currentRegion.city == name) {
              qqmapsdk.getDistrictByCityId({
                // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
                id: res.result[1][i].id,
                success: function (res) { //成功后的回调
                  //console.log(res);
                  districtArr = res.result[0];
                  that.regionData.district = districtArr
                  // that.setData({
                  //   ['regionData.district']: districtArr
                  // })
                },
              });
            }
          }
        },
      });
    },
    //地图标记点
    addMarker: function (data) {
      console.log(data)
      //console.log(data.title)
      var mks = [];
      mks.push({
        title: data.title,
        id: data.id,
        addr: data.addr,
        province: data.province,
        city: data.city,
        district: data.district,
        latitude: data.latitude,
        longitude: data.longitude,
      })
      this.markers = mks
      this.currentRegion.province = data.province
      this.currentRegion.city = data.city
      this.currentRegion.district = data.district
      this.currentRegion.addr = data.addr
      // this.setData({ //设置markers属性，将搜索结果显示在地图中
      //   markers: mks,
      //   ['currentRegion.province']: data.province,
      //   ['currentRegion.city']: data.city,
      //   ['currentRegion.district']: data.district,
      //   ['currentRegion.addr']: data.addr,
      // })
      uni.hideLoading({});
    },
    //点击选择搜索结果
    backfill: function (id, name) {
      // var id = e.currentTarget.id;
      // let name = e.currentTarget.dataset.name;
      for (var i = 0; i < this.suggestion.length; i++) {
        if (i == id) {
          //console.log(this.suggestion[i])
          this.centerData = this.suggestion[i],
          this.addListShow = false,
          this.latitude = this.suggestion[i].latitude,
          this.longitude = this.suggestion[i].longitude
          // this.setData({
          //   centerData: this.data.suggestion[i],
          //   addListShow: false,
          //   latitude: this.data.suggestion[i].latitude,
          //   longitude: this.data.suggestion[i].longitude
          // });
          this.nearby_search();
          return;
          //console.log(this.data.centerData)
        }
      }
    },
    //点击选择地图下方列表某项
    chooseCenter: function (id, name) {
      // var id = e.currentTarget.id;
      // let name = e.currentTarget.dataset.name;
      for (var i = 0; i < this.nearList.length; i++) {
        if (i == id) {
          this.selectedId = id,
          this.centerData = this.nearList[i],
          this.latitude = this.nearList[i].latitude,
          this.longitude = this.nearList[i].longitude,
          // this.setData({
          //   selectedId: id,
          //   centerData: this.data.nearList[i],
          //   latitude: this.data.nearList[i].latitude,
          //   longitude: this.data.nearList[i].longitude,
          // });
          this.addMarker(this.nearList[id]);
          return;
          //console.log(this.data.centerData)
        }
      }
    },
    //显示搜索列表
    showAddList: function () {
      this.addListShow = true
      // this.setData({
      //   addListShow: true
      // })
    },
    // 根据关键词搜索附近位置
    nearby_search: function () {
      var that = this;
      uni.hideLoading();
      uni.showLoading({
        title: '加载中'
      });
      // 调用接口
      qqmapsdk.search({
        keyword: that.keyword, //搜索关键词
        //boundary: 'nearby(' + that.latitude + ', ' + that.longitude + ', 1000, 16)',
        location: that.latitude + ',' + that.longitude,
        page_size: 20,
        page_index: 1,
        success: function (res) { //搜索成功后的回调
          //console.log(res.data)
          var sug = [];
          for (var i = 0; i < res.data.length; i++) {
            sug.push({ // 获取返回结果，放到sug数组中
              title: res.data[i].title,
              id: res.data[i].id,
              addr: res.data[i].address,
              province: res.data[i].ad_info.province,
              city: res.data[i].ad_info.city,
              district: res.data[i].ad_info.district,
              latitude: res.data[i].location.lat,
              longitude: res.data[i].location.lng
            });
          }
          that.selectedId = 0
          that.centerData = sug[0]
          that.nearList = sug
          that.suggestion = sug
          // that.setData({
          //   selectedId: 0,
          //   centerData: sug[0],
          //   nearList: sug,
          //   suggestion: sug
          // })
          that.addMarker(sug[0]);
        },
      });
    },
    //根据关键词搜索匹配位置
    getsuggest: function (e) {
      var _this = this;
      var keyword = e.detail.value;
      _this.addListShow = true
      // _this.setData({
      //   addListShow: true
      // })
      //调用关键词提示接口
      qqmapsdk.getSuggestion({
        //获取输入框值并设置keyword参数
        keyword: keyword, //用户输入的关键词，可设置固定值,如keyword:'KFC'
        location: _this.latitude + ',' + _this.longitude,
        page_size: 20,
        page_index: 1,
        //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
        success: function (res) { //搜索成功后的回调
          //console.log(res);
          var sug = [];
          for (var i = 0; i < res.data.length; i++) {
            sug.push({ // 获取返回结果，放到sug数组中
              title: res.data[i].title,
              id: res.data[i].id,
              addr: res.data[i].address,
              province: res.data[i].province,
              city: res.data[i].city,
              district: res.data[i].district,
              latitude: res.data[i].location.lat,
              longitude: res.data[i].location.lng
            });
          }
          _this.suggestion = sug,
          _this.nearList = sug,
          _this.keyword = keyword
          // _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
          //   suggestion: sug,
          //   nearList: sug,
          //   keyword: keyword
          // });
        },
        fail: function (error) {
          //console.error(error);
        },
        complete: function (res) {
          //console.log(res);
        }
      });
    },
    //打开选择省市区页面
    chooseCity: function () {
      let that = this;
      that.getRegionData();
      that.chooseCity = true
      that.regionShow = {
        province: false,
        city: false,
        district: true
      }
      that.currentProvince = that.currentRegion.province
      that.currentCity = that.currentRegion.city
      that.currentDistrict = that.currentRegion.district
      // that.setData({
      //   chooseCity: true,
      //   regionShow: {
      //     province: false,
      //     city: false,
      //     district: true
      //   },
      //   currentProvince: that.currentRegion.province,
      //   currentCity: that.currentRegion.city,
      //   currentDistrict: that.currentRegion.district,
      // })
    },
    //选择省
    showProvince: function () {
      this.regionShow = {
          province: true,
          city: false,
          district: false
        }
      // this.setData({
      //   regionShow: {
      //     province: true,
      //     city: false,
      //     district: false
      //   }
      // })
    },
    //选择城市
    showCity: function () {
      this.regionShow = {
          province: false,
          city: true,
          district: false
        }
      // this.setData({
      //   regionShow: {
      //     province: false,
      //     city: true,
      //     district: false
      //   }
      // })
    },
    //选择地区
    showDistrict: function () {
      this.regionShow = {
          province: false,
          city: false,
          district: true
        }
      // this.setData({
      //   regionShow: {
      //     province: false,
      //     city: false,
      //     district: true
      //   }
      // })
    },
    //选择省之后操作
    selectProvince: function (id, name) {
      //console.log(e)
      let that = this;
      // let id = e.currentTarget.dataset.id;
      // let name = e.currentTarget.dataset.name;
      that.currentProvince = name
      that.currentCity = '请选择城市'
      // that.setData({
      //   currentProvince: name,
      //   currentCity: '请选择城市',
      // })
      if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {
        var provinceArr = that.regionData.province;
        var cityArr = [];
        for (var i = 0; i < provinceArr.length; i++) {
          if (provinceArr[i].fullname == name) {
            cityArr.push(provinceArr[i])
            that.regionData = {
              province: that.regionData.province,
              city: cityArr,
              district: that.regionData.district
            }
            // that.setData({
            //   regionData: {
            //     province: that.regionData.province,
            //     city: cityArr,
            //     district: that.regionData.district
            //   }
            // })
            that.showCity();
            return;
          }
        }
      } else {
        let bj = that.regionShow;
        that.getById(id, name, bj)
      }
    },
    //选择城市之后操作
    selectCity: function (id, name) {
      let that = this;
      // let id = e.currentTarget.dataset.id;
      // let name = e.currentTarget.dataset.name;
      that.currentCity = name
      that.currentDistrict = '请选择城市'
      // that.setData({
      //   currentCity: name,
      //   currentDistrict: '请选择城市',
      // })
      let bj = that.regionShow;
      that.getById(id, name, bj)
    },
    //选择区县之后操作
    selectDistrict: function (e) {
      console.log('eeeee', e)
      let that = this;
      let id = e.currentTarget.dataset.id;
      let name = e.currentTarget.dataset.name;
      let latitude = e.currentTarget.dataset.latitude;
      let longitude = e.currentTarget.dataset.longitude;

      that.currentDistrict = name
      that.latitude = latitude
      that.longitude = longitude
      that.currentRegion.province = that.currentProvince
      that.currentRegion.city = that.currentCity
      that.currentRegion.district = name
      that.currentRegion.areaCode = id
      that.chooseCity = false,
        that.keyword = that.defaultKeyword

      // that.setData({
      //   currentDistrict: name,
      //   latitude: latitude,
      //   longitude: longitude,
      //   ['currentRegion.province']: that.currentProvince,
      //   ['currentRegion.city']: that.currentCity,
      //   ['currentRegion.district']: name,
      //   ['currentRegion.areaCode']: id,
      //   chooseCity: false,
      //   keyword: that.defaultKeyword
      // })
      that.nearby_search();
    },
    //根据选择省市加载市区列表
    getById: function (id, name, bj) {
      let that = this;
      qqmapsdk.getDistrictByCityId({
        // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
        id: id, //对应接口getCityList返回数据的Id，如：北京是'110000'
        success: function (res) { //成功后的回调
          //console.log(res);
          if (bj.province) {
            that.regionData = {
              province: that.regionData.province,
              city: res.result[0],
              district: that.regionData.district
            }
            // that.setData({
            //   regionData: {
            //     province: that.regionData.province,
            //     city: res.result[0],
            //     district: that.regionData.district
            //   }
            // })
            that.showCity();
          } else if (bj.city) {
            that.regionData = {
              province: that.regionData.province,
              city: that.regionData.city,
              district: res.result[0]
            }
            // that.setData({
            //   regionData: {
            //     province: that.regionData.province,
            //     city: that.regionData.city,
            //     district: res.result[0]
            //   }
            // })
            that.showDistrict();
          } else {
            that.chooseCity = false
            // that.setData({
            //   chooseCity: false,
            // })
          }
        },
        fail: function (error) {
          //console.error(error);
        },
        complete: function (res) {
          //console.log(res);
        }
      });
    },
    //确认选择地址
    selectedOk: function () {
      const that = this
      let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
      let prevPage = pages[pages.length - 2];
      var obj = {
        address: that.currentRegion.addr,
        area: that.currentRegion.district,
        areaCode: that.currentRegion.areaCode,
        city: that.currentRegion.city,
        id: null,
        lat: that.latitude,
        lng: that.longitude,
        province: that.currentRegion.province,
      }
      uni.setStorageSync('addressInfo', obj)
      API.address_add(obj).then(addRes => {
        console.log('添加地址信息', addRes)
        if (addRes.code == 200) {
          uni.setStorageSync('addressInfo', addRes.data)
        }
      })
      // API.address_add
      prevPage.onLoad()
      uni.navigateBack({
        delta: 1
      })
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
    let that = this;
    let addressInfo = uni.getStorageSync('addressInfo')
    let custLat = addressInfo && addressInfo.lat ? addressInfo.lat : 39.93
    let custLng = addressInfo && addressInfo.lng ? addressInfo.lng : 116.42
    console.log('地图mapsdk信息', TMap)
    that.mapCtx = uni.createMapContext('myMap')
    // 实例化API核心类
    console.log('地图对象只想', TMap)
    qqmapsdk = TMap.create({
      // key: 'IQKBZ-CHLCS-V2COT-6P2DI-44NIE-NCBDO'
      key: 'LQ5BZ-YZDWK-MT2JD-AKTIS-I6VD7-QQFV6'
    });
    // qqmapsdk = new QQMapWX({
    //   // key: 'IQKBZ-CHLCS-V2COT-6P2DI-44NIE-NCBDO'
    //   key: 'LQ5BZ-YZDWK-MT2JD-AKTIS-I6VD7-QQFV6'
    // });
    uni.showLoading({
      title: '加载中'
    });
    //定位
    uni.getLocation({
      type: 'wgs84',
      success(res) {
        //console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        that.qqLocation(latitude, longitude)
      },
      fail(err) {
        // 默认地址
        that.qqLocation(custLat, custLng)
        //console.log(err)
        // uni.hideLoading({});
        // uni.showToast({
        //   title: '定位失败',
        //   icon: 'none',
        //   duration: 1500
        // })
        // setTimeout(function () {
        //   uni.navigateBack({
        //     delta: 1
        //   })
        // }, 1500)
      }
    })
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped>
.top {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  position: fixed;
  top: 0;
  left: 0;
  padding: 30rpx 20rpx;
  z-index: 999;
  overflow: hidden;
}

.back {
  /* display: none; */
  width: 60rpx;
  height: 60rpx;
  text-align: center;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  float: left;
}

.search-box {
  width: 610rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 20rpx;
  background: rgb(255, 255, 255);
  margin-left: 20rpx;
  float: left;
  overflow: hidden;
}

.search-box1 {
  border: 1px solid #ccc;
  border-radius: 10rpx;
  background: #eee;
}

.search-box .region {
  width: 199rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  color: #282828;
  text-align: center;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-box .shu {
  width: 1rpx;
  height: 60rpx;
  background: #ccc;
  float: left;
}

.search-box input {
  width: 380rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  color: #282828;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  float: left;
}

.search-box .placeholder {
  width: 380rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  color: #ccc;
  padding: 0 20rpx;
  box-sizing: border-box;
  float: left;
}

.add-list-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 998;
  padding-top: 150rpx;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.add-list {
  width: 100%;
  height: 1000rpx;
}

.add-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx;
  text-align: left;
  border-top: 1px solid #eee;
}

.add-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-item .add {
  color: #707070;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.current-site-icon {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  /* top: 50%; */
  top: 150px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.near-list {
  height: 650rpx;
  /* padding-bottom: 100rpx; */
  box-sizing: border-box;
  background-color: #fff;
}

.near-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx 30rpx 90rpx;
  text-align: left;
  border-bottom: 1px solid #eee;
  position: relative;
}

.current-site {
  font-size: 40rpx;
  color: #3095F9;
  position: absolute;
  top: 40rpx;
  left: 30rpx;
}

.near-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.near-item .add {
  color: #707070;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.near-item .title1 {
  color: #3095F9;
}

.near-item .add1 {
  color: #3095F9;
}

.bottom-box {
  width: 100%;
  padding: 20rpx;
  background: #fff;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 88;
  overflow: hidden;
}

.bottom-box button {
  width: 100%;
  height: 80rpx;
  /* line-height: 80rpx; */
  border: none;
  background: #3095F9;
  color: #fff;
  font-size: 36rpx;
}

.region-box {
  width: 100%;
  height: 100%;
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
}

.region-box .region-top {
  position: relative;
  font-size: 40rpx;
  color: #282828;
  font-weight: bold;
  line-height: 100rpx;
  text-align: center;
}

.region-box .region-back {
  width: 80rpx;
  height: 80rpx;
  font-size: 50rpx;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

.region-box .region-tabs {
  line-height: 60rpx;
  font-size: 20rpx;
}

.region-tabs .tab {
  min-width: 100rpx;
  max-width: 200rpx;
  line-height: 40rpx;
  font-size: 20rpx;
  color: #3095F9;
  text-align: center;
  border: 1rpx solid #3095F9;
  border-radius: 20rpx;
  display: inline-block;
  margin: 20rpx 0 20rpx 20rpx;
  padding: 3rpx 20rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.region-list .region-item {
  font-size: 30rpx;
  color: #282828;
  line-height: 80rpx;
  padding: 10rpx 30rpx;
  border-top: 1rpx solid #eee;
}

.map-prompt {
  width: 420rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  color: #707070;
  text-align: center;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translate(-50%, 0);
}

.reload {
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 30rpx;
  right: 30rpx;
}

.reload .center1 {
  width: 30rpx;
  height: 30rpx;
  border: 1rpx solid #3095F9;
  border-radius: 50%;
  margin: 24rpx auto;
}

.reload .center2 {
  width: 25rpx;
  height: 25rpx;
  background: #3095F9;
  border-radius: 50%;
  margin: 3rpx auto;
}
</style>